<template>
  <div class="tab-container">
    <div class="tabswiper-cont">
      <div v-swiper:mySwiperK="swiperOption1" ref="swiperKe">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(tabitem, index) in ketangs" :key="index" ref="slideCont" @click="handleClick(tabitem.link)" @mouseover="handleHover(index)">
            <div :class="['tabswiper-item', {'tab-on': index == current}]">
              <img :src="tabitem.src" />
              <div class="tabswiper-desc">
                <h2>{{tabitem.title}}</h2>
                <p>
                  <strong>{{tabitem.subtitle}}</strong>
                </p>
              </div>
              <div class="div-shadow"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-button-prev">
        <Icon type="ios-arrow-back" size="34"></Icon>
      </div>
      <div class="swiper-button-next">
        <Icon type="ios-arrow-forward" size="34"></Icon>
      </div>
    </div>
    <div class="tabdesc-cont">
      <div class="tab-cont">
        <div class="tab-desc">
          <h3>{{ketangitem.title}}</h3>
          <h4>{{ketangitem.subtitle}}</h4>
          <p>{{ketangitem.desc}}</p>
        </div>
        <div class="tab-img">
          <img :src="ketangitem.big" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ketangs: [
        {
          title: '简',
          subtitle: '中小学云智能音乐教育系统',
          src: '/images/ketang/jian.png',
          big: '/images/ketang/jian_big.jpg',
          desc: '课件内容以教育部教学大纲为根基，融入高科技智能技术，通过智能便捷的手势操作、丰富的资源库，帮助老师实现轻松备课与授课。教学内容综合全面，从音乐理解能力、音乐创作能力以及与音乐相关的文化修养等多个维度对学生进行培养，使学生综合能力得到全面综合的发展。',
          link: '/kyclass/xiaobenke'
        }, {
          title: '互',
          subtitle: '幼儿音乐互动课堂',
          src: '/images/ketang/hu.png',
          big: '/images/ketang/hu_big.png',
          desc: '综合了奥尔夫、柯达伊和达尔克罗兹三大音乐教学法，创造性的将节奏、歌唱、体态律动和乐器常识结合起来，通过多媒体互动教学与配套教材让孩子们在快乐中学习，感受音乐的魅力。',
          link: '/kyclass/youer'
        }, {
          title: '智',
          subtitle: '智慧钢琴课堂',
          src: '/images/ketang/zhi.png',
          big: '/images/ketang/zhi_big.png',
          desc: '课程内容针对视唱练耳、乐理学习、钢琴演奏三个主要方面的专业内容对学生进行针对性的指导学习。通过信息化、自动化、智能化技术的引入，使钢琴教学具备主动性完整性、趣味性、主动性，更加符合校内音乐教学的实际需求。',
          link: '/kyclass/gangqin'
        }, {
          title: '趣',
          subtitle: '智慧非洲鼓课堂',
          src: '/images/ketang/qu.png',
          big: '/images/ketang/qu_big.jpg',
          desc: '采用创新型的教学模式，通过双手技巧配合，进行从简单到复杂的肢体同向、斜向、时间错位、协调性、速度、耐力等学习，提高孩子对节奏的平衡性、敏感性、准确性及其快速的反应能力，使其在兴奋愉快的状态中轻松完成所有课程。',
          link: '/kyclass/feizhougu'
        }
      ],
      nowindex: -1,
      swiperOption1: {
        loop: false,
        // loopedSlides: 2,
        slidesPerView: 3,
        centeredSlides: false,
        spaceBetween: 20,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        on: {
          slideChange() {
            // this.nowindex = this.realIndex
            // console.log('onSlideChangeEnd', this.realIndex, this);
            // _this.$options.methods.changed(this)
          },
          tap() {
            // console.log('onTap', this.activeIndex);
          }
        }
      },
      ketangitem: {
        title: '简',
        subtitle: '中小学云智能音乐教育系统',
        src: '/images/ketang/jian.png',
        big: '/images/ketang/jian_big.jpg',
        desc: '课件内容以教育部教学大纲为根基，融入高科技智能技术，通过智能便捷的手势操作、丰富的资源库，帮助老师实现轻松备课与授课。教学内容综合全面，从音乐理解能力、音乐创作能力以及与音乐相关的文化修养等多个维度对学生进行培养，使学生综合能力得到全面综合的发展。'
      },
      current: 0
    }
  },
  methods: {
    handleClick(url) {
      this.$router.push(url)
    },
    handleHover(n) {
      this.current = n
      this.ketangitem = this.ketangs[n]
    }
  },
  mounted() {
    // console.log('myswiperk', this.mySwiperK)
    // this.mySwiperK.on = {
    //   slideChange() {
    //     console.log(this)
    //   }
    // }
    this.ketangitem = this.ketangs[0]
  }
}
</script>

<style lang="less" scoped>
.my-swiper {
  height: 300px;
  width: 100%;
  .swiper-slide {
    text-align: center;
    font-size: 38px;
    font-weight: 700;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-pagination {
    > .swiper-pagination-bullet {
      background-color: red;
    }
  }
}
.swiper-button-prev {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: -60px;
  outline: none;
  background: #f5f5f7;
  border: 2px solid #ddd;
  border-radius: 50%;

  &:hover {
    background: #00a0e9;
    border-color: #00a0e9;
    color: #fff;
  }
}
.swiper-button-next {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -60px;
  outline: none;
  background: #f5f5f7;
  border: 2px solid #ddd;
  border-radius: 50%;

  &:hover {
    background: #00a0e9;
    border-color: #00a0e9;
    color: #fff;
  }
}
.swiper-container {
  --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
  --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px;/* 设置按钮大小 */
}

.tab-container {
  // width: 1400px;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tabswiper-cont {
  width: 1100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-wrapper {
  padding: 0 0 25px;

  .tabswiper-item {
    display: block;
    // margin: 0 20px;
    width: 320px;
    position: relative;

    &.tab-on, &:hover {
      div {
        border-bottom: 5px solid #00a0e9;
      }
    }

    img {
      width: 320px;
      // height: 220px;
    }

    .tabswiper-desc {
      width: 280px;
      height: 210px;
      margin-left: 20px;
      margin-top: -50px;
      padding: 45px;
      background: #fff;
      border-bottom: 5px solid #fff;
      position: relative;
      z-index: 10;
      transition: all 0.25s;
    }

    .div-shadow {
      width: 280px;
      height: 160px;
      position: absolute;
      left: 20px;
      bottom: 0;
      box-shadow: 0 0 20px 10px rgba(221, 221, 221, .75);
      z-index: 9;
    }

    h2 {
      display: inline-block;
      font-size: 36px;
      padding: 0 10px;
      color: #000;
      border-bottom: 4px solid #00a0e9;
    }

    p {
      margin-top: 30px;
      font-size: 14px;
      color: #000;
    }
  }
}


.tab-cont {
  width: 1160px;
  margin: 105px auto 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .tab-desc {
    display: flex;
    flex-direction: column;

    h3 {
      display: inline-block;
      width: 70px;
      padding: 0 15px 8px;
      margin-top: 20px;
      font-size: 36px;
      color: #000;
      position: relative;
      border-bottom: 4px solid #00a0e9;
    }

    h4 {
      font-size: 18px;
      margin-top: 40px;
    }

    p {
      margin-top: 25px;
      font-size: 16px;
      line-height: 1.4;
      width: 480px;
    }
  }

  .tab-img {
    width: 585px;
    height: 360px;

    img {
      width: 585px;
      height: 360px;
    }
  }
}
</style>
